<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Marvel Corner</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/marvel.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- Start your project here-->  

  <header>
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
      <div class="container">

        <!-- Navbar brand -->
        <a class="navbar-brand" href="#">Marvel</a>
    
        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
          aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    
        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="basicExampleNav">
          <!-- Links -->
          <ul class="navbar-nav mr-auto smooth-scroll">
            <li class="nav-item">
              <a class="nav-link" href="#intro">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#more">More</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#gallery">Gallery</a>
            </li>
          </ul>
          <!-- Links -->
    
          <form class="form-inline">
            <div class="md-form my-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            </div>
          </form>
        </div>
        <!-- Collapsible content -->
      </div>
    </nav>
    
    <div id="intro" class="view">
      <div class="mask rgba-black-strong">
        <!-- 添加了.container-fluid 容器以利用栅格进行布局 -->
        <div class="container-fluid d-flex align-items-center justify-content-center h-100">
          <!-- 新添加的 div, 表示栅格中的行 -->
          <div class="row d-flex justify-content-center text-center">
            <!-- 新添加的 div, 表示栅格中的列 -->
            <div class="col-md-10">
              <!-- Heading -->
              <h2 class="display-4 font-weight-bold white-text pt-5 mb-2">TOUR OF MARVEL HEROES</h2>
              <!-- Divider -->
              <hr class="hr-light">
              <!-- Description -->
              <a href="https://marvel.com" target="_blank"><button type="button" class="btn btn-outline-white">read more</button></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>


  <main class="mt-5">
    <div class="container">
      <section id="about">
        <h2 class="mb-5 font-weight-bold text-center">About</h2>

        <h3 class="mb-5 font-weight-bold">The Marvel's Big Three</h3>

        <div class="card my-5">
          <!-- Card image -->
          <div class="view overlay">
            <img class="card-img-top" src="./img/iron-man.jpg" alt="iron man">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body text-center">

            <!-- Title -->
            <h4 class="card-title">Iron Man</h4>
            <!-- Text -->
            <p class="card-text">"My armor, it was never a distraction or a hobby, it was a cocoon. And now, I'm a changed man. You can take away my house, all my tricks and toys. But one thing you can't take away... I am Iron Man."―Tony Stark</p>
            <a href="https://marvelcinematicuniverse.fandom.com/wiki/Iron_Man" class="btn btn-primary" target="_blank">read more</a>
          </div>

        </div>

        <div class="card my-5">
          <!-- Card image -->
          <div class="view overlay">
            <img class="card-img-top" src="./img/captain.jpg" alt="captain">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body text-center">

            <!-- Title -->
            <h4 class="card-title">Captain America</h4>
            <!-- Text -->
            <p class="card-text">"For as long as I can remember, I just wanted to do what was right. I guess I'm not quite sure what that is anymore.
             And I thought I could throw myself back in and follow orders, serve. It's just not the same."―Steve Rogers to Peggy Carter</p>
            <a href="https://marvelcinematicuniverse.fandom.com/wiki/Captain_America" class="btn btn-primary" target="_blank">read more</a>
          </div>

        </div>

        <div class="card my-5">
          <!-- Card image -->
          <div class="view overlay">
            <img class="card-img-top" src="./img/thor.jpg" alt="thor">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body text-center">

            <!-- Title -->
            <h4 class="card-title">Thor</h4>
            <!-- Text -->
            <p class="card-text">"It's time for me to be who I am, rather than who I'm supposed to be."―Thor to Valkyrie</p>
            <a href="https://marvelcinematicuniverse.fandom.com/wiki/Thor" class="btn btn-primary" target="_blank">read more</a>
          </div>

        </div>

        <h3 class="mb-5 font-weight-bold">The Spider Man</h3>

        <div class="card card-cascade wider mb-5">

          <!-- Card image -->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="./img/spider-man.jpg" alt="spider man">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body card-body-cascade text-center">

            <!-- Title -->
            <h4 class="card-title"><strong>Spider Man</strong></h4>
            <!-- Text -->
            <p class="card-text">"I'm just a friendly neighborhood Spider-Man."
              ―Spider-Man</p>

            <a href="https://marvelcinematicuniverse.fandom.com/wiki/Spider-Man" class="btn btn-primary" target="_blank">read more</a>

          </div>

        </div>

        <h3 class="mb-5 font-weight-bold">The Black Panther</h3>

        <!-- Card -->
        <div class="card card-cascade wider reverse">

          <!-- Card image -->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="./img/black-panther.jpg"
              alt="black-panther">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body card-body-cascade text-center">

            <!-- Title -->
            <h4 class="card-title"><strong>Black Panther</strong></h4>
            <!-- Subtitle -->
            <!-- Text -->
            <p class="card-text">"My name is King T'Challa, son of King T'Chaka. I am the sovereign ruler of the nation of Wakanda. And for the first time in our history, we will be sharing our knowledge and resources with the outside world."
              ―T'Challa</p>
            <a href="https://marvelcinematicuniverse.fandom.com/wiki/Black_Panther" class="btn btn-primary" target="_blank">read more</a>

          </div>

        </div>
        <!-- Card -->
      </section>

      <hr class="my-5"/>

      <section id="more">
        <h2 class="mb-5 font-weight-bold text-center">More</h2>

        <div class="row mb-5">
          <div class="col-lg-5 col-md-7 mb-4 view">
            <img src="./img/thanos.jpg" class="img-fluid z-depth-1" alt="thanos">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
          <div class="col-lg-7 col-md-5 mb-4">
            <div class="row m-4">
              <h4 class="font-weight-bold">Thanos</h4>
              <p>"I know what it's like to lose. To feel so desperately that you're right, yet to fail nonetheless. It's frightening. Turns the legs to jelly. I ask you, to what end? Dread it. Run from it. Destiny arrives all the same. And now, it's here. Or should I say, I am."
                ―Thanos</p>
            </div>

            <div class="row my-4">
              <div class="col-lg-7 col-md-5 mb-4 text-right">
                <a href="https://marvelcinematicuniverse.fandom.com/wiki/Thanos" class="btn btn-primary" target="_blank">read more</a>
              </div>
            </div>
          </div>
          
        </div>

        <div class="row mb-5">
          <div class="col-lg-7 col-md-5 mb-4">
            <div class="row m-4">
              <h4 class="font-weight-bold">Loki</h4>
              <p>"I, Loki, Prince of Asgard, Odinson, the rightful King of Jotunheim, God of Mischief, do hereby pledge to you, my undying fidelity."
                ―Loki to Thanos</p>
            </div>

            <div class="row my-4">
              <div class="col-lg-7 col-md-5 mb-4 text-right">
                <a href="https://marvelcinematicuniverse.fandom.com/wiki/Loki" class="btn btn-primary" target="_blank">read more</a>
              </div>
            </div>
          </div>
          <div class="col-lg-5 col-md-7 mb-4 view">
            <img src="./img/loki.jpg" alt="loki" class="img-fluid z-depth-1">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
        </div>

        <div class="row mb-5">
          <div class="col-lg-5 col-md-7 mb-4 view">
            <img src="./img/hulk-in-more.jpg" class="img-fluid z-depth-1" alt="hulk">
            <a href="#!">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>
          <div class="col-lg-7 col-md-5 mb-4">
            <div class="row m-4">
              <h4 class="font-weight-bold">Hulk</h4>
              <p>"For years, I've been treating the Hulk like he's some kind of disease... something to get rid of. But then, I start looking at him as the cure. Eighteen months in a gamma lab, I put the brains and the brawn together. And now, look at me. Best of both worlds."
                ―Bruce Banner</p>
            </div>

            <div class="row my-4">
              <div class="col-lg-7 col-md-5 mb-4 text-right">
                <a href="https://marvelcinematicuniverse.fandom.com/wiki/Hulk" class="btn btn-primary" target="_blank">read more</a>
              </div>
            </div>
          </div>
          
        </div>
      </section>

      <hr class="my-5"/>

      <section id="gallery">
        <h2 class="mb-5 font-weight-bold text-center">Gallery</h2>

        <!--Carousel Wrapper-->
        <div id="carousel-heroes" class="carousel slide carousel-fade" data-ride="carousel">
          <!--Indicators-->
          <ol class="carousel-indicators">
            <li data-target="#carousel-heroes" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-heroes" data-slide-to="1"></li>
            <li data-target="#carousel-heroes" data-slide-to="2"></li>
            <li data-target="#carousel-heroes" data-slide-to="3"></li>
            <li data-target="#carousel-heroes" data-slide-to="4"></li>
          </ol>
          <!--/.Indicators-->
          <!--Slides-->
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <div class="view">
                <img class="d-block w-100" src="./img/carousel-spider-man.jpg" alt="spider man">
                <div class="mask rgba-black-light"></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive font-weight-bold my-5">Spider Man</h3>
              </div>
            </div>
            <div class="carousel-item">
              <!--Mask color-->
              <div class="view">
                <img class="d-block w-100" src="./img/carousel-thor.jpg" alt="thor">
                <div class="mask rgba-black-strong"></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive font-weight-bold my-5">Thor</h3>
              </div>
            </div>
            <div class="carousel-item">
              <!--Mask color-->
              <div class="view">
                <img class="d-block w-100" src="./img/carousel-black-widow.jpg" alt="black-widow">
                <div class="mask rgba-black-slight"></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive font-weight-bold my-5">Black Widow</h3>
              </div>
            </div>
            <div class="carousel-item">
              <div class="view">
                <img class="d-block w-100" src="./img/carousel-iron-man.jpg" alt="iron man">
                <div class="mask rgba-black-light"></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive font-weight-bold my-5">Iron Man</h3>
              </div>
            </div>
            <div class="carousel-item">
              <div class="view">
                <img class="d-block w-100" src="./img/carousel-captain-america.jpg" alt="captain ameria">
                <div class="mask rgba-black-light"></div>
              </div>
              <div class="carousel-caption">
                <h3 class="h3-responsive font-weight-bold my-5">Captain America</h3>
              </div>
            </div>
          </div>
          <!--/.Slides-->
          <!--Controls-->
          <a class="carousel-control-prev" href="#carousel-heroes" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carousel-heroes" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
          <!--/.Controls-->
        </div>
        <!--/.Carousel Wrapper-->

        <div class="view mt-5">
          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-12 mb-3 zoom">

              <img src="./img/black-widow.jpg" class="img-fluid z-depth-1" alt="black-widow">

              <a href="#!">
                <div class="mask rgba-red-slight"></div>
              </a>
            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-lg-4 col-md-12 mb-3 zoom">
              <a href="#!">
                <img src="./img/doctor-strange.jpg" class="img-fluid z-depth-1" alt="doctor-strange">
              </a>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-4 col-md-6 mb-3 zoom">
              <a href="#!">
                <img src="./img/hulk.jpg" class="img-fluid z-depth-1" alt="hulk">
              </a>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-4 col-md-6 mb-3 zoom">
              <a href="#!">
                <img src="./img/ultron.jpg" class="img-fluid z-depth-1" alt="ultron">
              </a>
            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-6 mb-3 zoom">
              <a href="#!">
                <img src="./img/captain-marvel.jpg" class="img-fluid z-depth-1" alt="captain-marvel">
              </a>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-6 mb-3 zoom">
              <a href="#!">
                <img src="./img/hawkeye.jpg" class="img-fluid z-depth-1" alt="hawkeye">
              </a>
            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->
        </div>
      </section>
    </div>
  </main>



    <!-- Footer -->
    <footer class="page-footer font-small blue pt-4">

      <!-- Footer Links -->
      <div class="container-fluid text-center text-md-center">

          <!-- Grid column -->
          <div class="col-md-12">
            <!-- Content -->
            <h5 class="text-uppercase">Thanks for watching</h5>
            <hr class="clearfix w-100 d-md-none pb-3">
          </div>
          <!-- Grid column -->

          <a href="https://github.com/Mavenue/Mavenue.github.io" target="_blank"><i class="fab fa-github" aria-hidden="true"> Github</i></a> 
          <br />
          <i class="fab fa-qq" aria-hidden="true"> 2640439972</i>
          <p>Made By Mavenue</p>
      </div>
      <!-- Footer Links -->

      <!-- Copyright -->
      <div class="footer-copyright text-center py-3">© 2020 Copyright:
        <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
      </div>
      <!-- Copyright -->

    </footer>
    <!-- Footer -->
  <!-- End your project here-->







  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Your custom scripts (optional) -->
  <script type="text/javascript"></script>

</body>
</html>
